<template>
  <BasicModal
    v-bind="$attrs"
    @ok="handleSubmint"
    :width="1200"
    okText="确定"
    @register="register"
    :title="props.title"
    @visible-change="handleVisibleChange"
  >
    <div class="tag-box">
      <div class="main-nav">
        <BasicTree
          :loading="loading"
          title=""
          ref="treeRefPro"
          :treeData="treeDataPro"
          :fieldNames="{ key: 'Key', title: 'Name', children: 'Children' }"
          :onSelect="handleTreeSelect"
        />
      </div>
      <div class="main-content">
        <BasicTable @register="registerTable" />
      </div>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
  import { getaddresstrees, getaddressgrid } from '/@/api/tag/index';
  import { ref, nextTick, reactive, unref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    driveId: String,
  });

  const [register] = useModal();
  const emit = defineEmits(['checkAddress']);
  let treeDataPro: any = ref([]);
  let loading = ref(false);
  let BasicTableTitle: any = ref('');
  const treeRefPro = ref<Nullable<TreeActionType>>(null);
  let tableParams: any = reactive({
    Key: '',
  });
  // 表单数据
  let columns: BasicColumn[] = [
    {
      fixed: 'left',
      title: '名称',
      dataIndex: 'Name',
    },
    {
      title: '地址',
      dataIndex: 'Address',
    },
    {
      title: '当前值',
      dataIndex: 'Value',
    },
    {
      title: '值类型',
      dataIndex: 'DataType',
    },
    {
      title: '描述',
      dataIndex: 'Description',
    },
  ];
  //   setSelectedRowKeys  设置选中行
  // getSelectRows 获取选择行
  // clearSelectedRowKeys 清空选中行
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, setTableData }] = useTable({
    title: BasicTableTitle,
    api: getaddressgrid,
    immediate: false,
    columns,
    canResize: false,
    rowSelection: {
      type: props.isMultiple ? 'checkbox' : 'radio',
      checkStrictly: true,
      // getCheckboxProps(record: Recordable){
      //   return handleGetCheckProps(record)
      // },
    },
    pagination: false,
    showIndexColumn: false,
    rowKey: 'Name',
    striped: true,
    bordered: true,
    beforeFetch: () => {
      return [props.driveId, tableParams.Key];
    },
  });
  const { createMessage } = useMessage();
  // onMounted(async () => {

  // });
  function getTree() {
    const tree = unref(treeRefPro);
    if (!tree) {
      throw new Error('tree is null!');
    }
    return tree;
  }
  function eachTree(treeDatas: any[]) {
    treeDatas.forEach((element) => {
      element.title = element.Key;
      element.Name = element.Key;
      // switch (element.Type) {
      //   case 0:
      //     element.icon = 'ant-design:home-outlined';
      //     break;
      //   case 1:
      //     element.icon = 'ant-design:database-outlined';
      //     break;
      //   case 2:
      //     element.icon = 'ant-design:bars-outlined';
      //     break;
      //   case 3:
      //     element.icon = 'ant-design:folder-outlined';
      //     break;
      //   default:
      //     break;
      // }
      if (element.Children) eachTree(element.Children);
    });
  }
  async function initData() {
    loading.value = true;
    let resByTree = await getaddresstrees([props.driveId]);
    eachTree(resByTree);
    treeDataPro.value = resByTree || [];
    nextTick(() => {
      getTree().filterByLevel(1);
    });
    loading.value = false;
  }
  function handleTreeSelect(_e, info) {
    let { Type, Key } = info.node;
    if (Type !== 0) {
      tableParams.Key = Key;

      reload();
      clearSelectedRowKeys();
    } else {
      setTableData([]);
    }
  }
  async function handleSubmint() {
    let res = await getSelectRows();
    if (res.length === 0) {
      createMessage.warning('请选择地址');
    } else {
      clearSelectedRowKeys();
      emit('checkAddress', res);
    }
  }
  async function handleVisibleChange(visible) {
    if (visible) {
      await initData();
    } else {
      clearSelectedRowKeys();
    }
  }
</script>

<style lang="less" scoped>
  .tag-box {
    width: 100%;
    position: relative;

    min-height: 600px;
    background-color: #fff;

    .main-nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 240px;
      height: 100%;
      padding: 8px;
      box-sizing: border-box;
      background-color: rgba(8, 30, 66, 0.04);
      border-radius: 3px;
    }

    .main-content {
      position: relative;
      height: 100%;
      margin-left: 260px;
    }
  }
</style>
